<template>
  <div>
    <van-nav-bar
        title="我的订单"
        left-arrow
        @click-left="onClickLeft"
    />

    <van-tabs v-model="active">
      <van-tab title="全部" >
        <div v-for="item in orderInfo" :key="item.id" style="padding: 20px">
          <div style="height: 190px">
            <div style="height: 14px">
              <span>订单编号：{{item.orderNumber}}</span>
              <span style="float: right" v-if="item.status=='1'">待付款</span>
              <span style="float: right" v-if="item.status=='2'">待使用</span>
              <span style="float: right" v-if="item.status=='3'">待评价</span>
            </div>
            <van-card
                :title="item.orderName"
                :thumb="item.photo"
                :price="item.price"
                :num="item.number"
                is-clickable

            >
              <div slot="price">
                <span>￥{{item.price}}</span>
              </div>
            </van-card>
            <div style="height: 15px;">
              <span style="font-size: 12px;float: right">优惠:{{item.discount}}，
               需付款：￥<span style="float: right;font-size: 15px;">{{Number(item.price*item.number)+Number(item.freight)-Number(item.discount)}}</span>
              </span>
            </div>
            <div style="width: 100%;height: 50px;float: right" v-if="item.status=='1'">
              <el-button type="warning" round style="float: right;margin-right: 10px" @click="Payment(item)">立即付款</el-button>
              <el-button  round style="float: right;margin-right: 10px" @click="StatusModification(item.id)">取消订单</el-button>
            </div>
            <div style="width: 100%;height: 50px;float: right" v-if="item.status=='2'">
              <el-button type="warning" round style="float: right;margin-right: 10px" @click="goUse(item.id)">去使用</el-button>
            </div>
            <div style="width: 100%;height: 50px;float: right" v-if="item.status=='3'">
              <el-button type="warning" round style="float: right;margin-right: 10px">立即评价</el-button>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待付款">

        <div v-for="item in orderInfo" :key="item.id" style="padding: 20px" v-if="item.status=='1'">
          <div  style="height: 200px">
            <div style="height: 14px">
              <span>订单编号：{{item.orderNumber}}</span>
              <span style="float: right">待付款</span>
            </div>
            <van-card
                :title="item.orderName"
                :thumb="item.photo"
                :price="item.price"
                :num="item.number"
                is-clickable
                @click="findOrderInfo(item)"
            >
              <div slot="price">
                <span>￥{{item.price}}</span>
              </div>
            </van-card>
            <div style="height: 15px;">
              <span style="font-size: 12px;float: right">优惠:{{item.discount}}，
               需付款：￥<span style="float: right;font-size: 15px;">{{Number(item.price*item.number)+Number(item.freight)-Number(item.discount)}}</span>
              </span>
            </div>
            <div style="width: 100%;height: 50px;float: right">
              <el-button type="warning" round style="float: right;margin-right: 10px" @click="Payment(item)">立即付款</el-button>
              <el-button  round style="float: right;margin-right: 10px" @click="StatusModification(item.id)">取消订单</el-button>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待使用">
        <div v-for="item in orderInfo" :key="item.id" style="padding: 20px" v-if="item.status=='2'">
          <div  style="height: 200px">
            <div style="height: 14px">
              <span>订单编号：{{item.orderNumber}}</span>
              <span style="float: right">待使用</span>
            </div>
            <van-card
                :title="item.orderName"
                :thumb="item.photo"
                :price="item.price"
                :num="item.number"
                is-clickable
                @click="findOrderInfo(item)"
            >
              <div slot="price">
                <span>￥{{item.price}}</span>
              </div>
            </van-card>
            <div style="height: 15px;">
              <span style="font-size: 12px;float: right">优惠:{{item.discount}}，
               需付款：￥<span style="float: right;font-size: 15px;">{{Number(item.price*item.number)+Number(item.freight)-Number(item.discount)}}</span>
              </span>
            </div>
            <div style="width: 100%;height: 50px;float: right" v-if="item.status=='2'">
              <el-button type="warning" round style="float: right;margin-right: 10px" @click="goUse(item.id)">去使用</el-button>
<!--              <el-button  round style="float: right;margin-right: 10px" @click="StatusModification(item.id)">取消订单</el-button>-->
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待评价">
        <div v-for="item in orderInfo" :key="item.id" style="padding: 20px" v-if="item.status=='3'">
          <div  style="height: 200px">
            <div style="height: 14px">
              <span>订单编号：{{item.orderNumber}}</span>
              <span style="float: right">待评价</span>
            </div>
            <van-card
                :title="item.orderName"
                :thumb="item.photo"
                :price="item.price"
                :num="item.number"
                is-clickable
                @click="findOrderInfo(item)"
            >
              <div slot="price">
                <span>￥{{item.price}}</span>
              </div>
            </van-card>
            <div style="height: 15px;">
              <span style="font-size: 12px;float: right">优惠:{{item.discount}}，
               需付款：￥<span style="float: right;font-size: 15px;">
                  {{(Number(item.price*item.number)+Number(item.freight)-Number(item.discount)).toFixed(2)}}
                </span>
              </span>
            </div>
            <div style="width: 100%;height: 50px;float: right">
              <el-button type="warning" round style="float: right;margin-right: 10px">立即评价</el-button>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup v-model:show="dialogVisible" :style="{ padding: '64px' }">
      <canvas id="canvas" style="align-content: center;"></canvas>
      <div style="text-align: center;">请使用微信扫描二维码支付</div>
    </van-popup>
    <van-popup v-model:show="dialogVisible2" :style="{ padding: '64px' }">
      <vue-qr
          text="https://www.baidu.com/"
          :size="200"
      ></vue-qr>
    </van-popup>
  </div>
</template>

<script>
import VueQr from "vue-qr";
import {findOrderInfoList, StatusModification} from "@/api/category/category";
import axios from "axios";
import QRCode from "qrcode"
import Vue from "vue";
Vue.use(QRCode)
export default {
  components:{
    VueQr
  },
  data() {
    return {
      active: 0,
      orderInfo:[],
      dialogVisible:false,
      dialogVisible2:false
    }
  },
  created() {
    // 获取订单信息
    this.findOrderInfo();
  },
  methods: {
    goUse(row){
      this.dialogVisible2=true
      this.useqrcode("https://www.baidu.com");
      console.log(row)
    },
    Payment(row){
      axios.get(`http://1.94.221.254:9999/api/qcfw-home/wxpay/getQrCodeUrl/${row.orderNumber}`).then((res) => {
        console.log(res.data.data)
        this.useqrcode(res.data.data);
      })
      this.dialogVisible=true
      setTimeout(() => {
        this.axios.post(`http://1.94.221.254:9999/api/qcfw-home/wxpay/orderquery?id=${row.id}`, row).then((ress) => {
          if (ress.data == 'fail') {
            console.log("请求超时")
          }
          if (ress.data == 'fail') {
            console.log('请求失败')
          }
          if (ress.data == 'success') {
            this.$message.success('支付成功')
            this.findOrderInfo()
            this.dialogVisible=false
          }
        })
      }, 3000);
    },
    useqrcode(url) {
      var canvas = document.getElementById("canvas");
      this.$QRCode.toCanvas(canvas, url, { width: 158 });
      // QRCode.toCanvas(canvas, url, function (error) {
      //   if (error) {
      //     console.log(error);
      //   } else {
      //     console.log("success!");
      //   }
      // });
    },
    onClickLeft(){
      this.$router.push('/wode')
    },
    // 获取订单信息
    findOrderInfo() {
      var token= localStorage.getItem("token")
      findOrderInfoList(token).then(res => {
        this.orderInfo = res.data
      })
      //等待1秒
    },
    StatusModification(id){
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        StatusModification(id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.findOrderInfo()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
}
</script>
